<template>
    <div class="ElInputInteger">
        <el-input
                v-model="valueUse"
        ></el-input>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class ElInputInteger extends Vue {
  @Prop({
    default: 0
  })
  readonly value!: any
  @Prop({
    default: false
  })
  readonly isFloat!: any
  @Prop({
    default: 0
  })
  readonly min!: any
  @Prop({
    default: 99999999
  })
  readonly max!: any
  valueUse: any = this.value

  mounted() {
    this.reload()
  }

  reload() {}

  @Watch('valueUse')
  onValueUseChanged(v) {
    let regex = new RegExp('[1-9]\\d{0,8}')

    if (this.isFloat) {
      regex = new RegExp('^\\d{1,8}\\.{0,1}\\d{0,2}')
    }

    let c = (v + '').match(regex)
    this.valueUse = c ? c[0] : 0

    if (this.valueUse.length > 1 && [...this.valueUse][1] !== '.' && [...this.valueUse][0] === '0') {
      this.valueUse = this.valueUse.slice(1)
    }

    let num = Number.parseFloat(this.valueUse)

    if (num < this.min) {
      this.valueUse = this.min
    }

    if (num > this.max) {
      this.valueUse = this.max
    }

    this.$emit('input', this.valueUse)
  }

  @Watch('value')
  onValueChanged(v) {
    this.valueUse = v
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~style/all.less";

    .ElInputInteger {
    }
</style>